<template>
   <div class="column-detail-page w-75 mx-auto">
    <div class="column-info row mb-4 border-bottom pb-4 aligin-items-centter">
        <div class="col-3 text-center">
            <img :src="column.avatar.url" alt="" class="rounded-circle border w-100">
        </div>
        <div class="col-9">
            <h4>{{ column.title }}</h4>
        </div>
    </div>
     <PostList :list="list"></PostList>
   </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted} from 'vue'
import { useStore} from 'vuex'
import { useRoute, useRouter} from 'vue-router'
import PostList from '@/components/PostList.vue'


export default defineComponent({
    components:{
        PostList
    },
    setup() {
        //它是一个函数，调用之后可以返回对应的对象
        const route = useRoute()
        const store = useStore() 
        const currenId = route.params.id
        onMounted(() => {
            //专栏详情
            store.dispatch('fetchColumn', currenId)
            //文章列表
            store.dispatch('fetchPosts', currenId)
        })
        const column = computed(() => store.getters.getColumnById(currenId))
        const list = computed(() => store.getters.getPostById(currenId))
        console.log(column)
        return {
           column,
           list
        }
    }
})

</script>

<style scoped>

</style>